<template>
	<view class="content">
		<view>
			<!-- 	骨架屏 -->
			<view class="skeleton">
				<m-for-skeleton :avatarSize="200" :row="2" :loading="loading" :isarc="square" v-for="(item,key) in 5"
					:key="key">
					<view>asdas</view>
				</m-for-skeleton>
			</view>
			<!-- 搜索框 -->

			<view> <input class="search01" @click=" search01" type="text" value="搜索 " /> </view>
			<uni-list v-for="item in playlist" :key="item.id">
				<uni-list-item title="" note="">
					<view class="container" @click="handleNavtoList(item.id)">
						<view class="img">
							<img :src="item.coverImgUrl" alt="" />
							<text class="onetext">{{ item.updateFrequency }}</text>
						</view>
						</navigator>
						<view class="text">
							<p v-for="(track, index) in item.tracks || []" :key="index" class="single-line">
								{{ index + 1 }}. {{ track.first }} -- {{ track.second }}
							</p>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>


<script>
	import {
		toplist
	} from '../../common/api.js'
	export default {
		data() {
			return {
				playlist: [],
				loading: true // 设置初始加载状态
			};
		},
		onLoad() {
			toplist().then((res) => {
				this.playlist = res.data.list.slice(0, 4);
				this.loading = false; // 数据加载完毕后设置加载状态为 false
			});
		},
		methods: {

			handleNavtoList(id) {
				uni.navigateTo({
					url: '/pages/list/list?listid=' + id,
				});
			},
			search01() {
				uni.navigateTo({
					url: '/pages/search/search',
				});
			}
		}

	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.search01 {
		width: 650rpx;
		height: 20px;
		padding: 5px;
		border: 2px solid black;
		border-radius: 15rpx;
		outline: none;
		font-size: 15rpx;
		margin: auto;
	}


	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.container {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 214rpx;
		margin-left: -26rpx;
		margin-top: 20rpx;
	}

	.img {
		width: 214rpx;
		height: 214rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		margin: 50rpx;
		color: white;
	}

	.img img {
		width: 214rpx;
		height: 214rpx;
		border-radius: 20rpx;
	}

	.onetext {
		font-size: 20rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 10rpx;
	}

	.text {
		margin-left: 10rpx;
	}

	.single-line {
		display: inline-block;
		width: 100%;
		white-space: normal;
		font-size: 12rpx;
	}
</style>